import React from 'react';
import { browserHistory } from 'react-router'
import {Layout} from 'antd';
const { Header, Sider, Content } = Layout;
import { Menu, Icon} from 'antd';
const SubMenu = Menu.SubMenu;
import { Breadcrumb } from 'antd';

export default class Frame extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: 'dark',
      current : browserHistory.getCurrentLocation().pathname //获取当前路由地址
    };
  };

  componentDidMount(){
    this.setState({
      frameHeight:$('body').height()-$('.ant-layout-header').height()-1
    });
  }

  handleClick = (e) => {
    //console.log(e.key);
    this.setState({
      current: e.key,
    });
    browserHistory.push(e.key); //设置路由
  };

  render() {
    return (
      <div id="frame">
        <Layout>
          <Sider>
            <div id="logo">
              Demo
            </div>
            <Menu theme={this.state.theme} onClick={this.handleClick} style={{ width: 200,height:this.state.frameHeight}} defaultOpenKeys={['sub1']} selectedKeys={[this.state.current]} mode="inline">
              <SubMenu key="sub1" title={<span><Icon type="mail" /><span>活动中心</span></span>}>
                <Menu.Item key="/Server">服务器列表</Menu.Item>
                <Menu.Item key="/Domain">域名管理</Menu.Item>
                <Menu.Item key="/Active">活动列表</Menu.Item>
                <Menu.Item key="/Data">数据统计</Menu.Item>
                <Menu.Item key="/about/contact">测试</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout>
            <Header id="header">{/*Header*/}</Header>
            <Content id="content" style={{padding:'15px 20px 15px 20px'}}>
              <Breadcrumb>
                <Breadcrumb.Item href="">
                  <Icon type="home" />
                </Breadcrumb.Item>
                <Breadcrumb.Item href="">
                  <span>活动中心</span>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  域名管理
                </Breadcrumb.Item>
              </Breadcrumb>
              <div id="main">
                {this.props.children}
              </div>
            </Content>
          </Layout>
        </Layout>
      </div>
    )
  }
}
